<template>
  <div class='container'>
    <el-dialog
      :title="showTitle"
      :visible='showDialog'
      @close="cancelBtn"
    >
      <el-form
        ref="dataForm"
        :model="formData"
        :rules="rules"
      >
        <el-form-item
          prop="title"
          label="文章标题:"
          label-width="100px"
        >
          <el-input
            v-model="formData.title"
            autocomplete="off"
            size="small"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="articleBody"
          label="文章内容:"
          label-width="100px"
        >
          <div style="border: 1px solid #ccc;">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 200px; overflow-y: hidden;"
              v-model="formData.articleBody"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </el-form-item>
        <el-form-item
          label="视频地址:"
          label-width="100px"
        >
          <el-input
            v-model="formData.videoURL"
            autocomplete="off"
            size="small"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部按钮 -->
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="cancelBtn">取消</el-button>
        <el-button
          type="primary"
          @click="btnOK"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入富文本编辑器
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
// 导入接口
import { add, detail, update } from '@/api/hmmm/articles'

export default {
  components: {
    Editor,
    Toolbar
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      // 表单数据对象
      formData: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      // 表单校验规则
      rules: {
        title: [{ required: true, message: '文章标题不能为空', trigger: 'blur' }],
        articleBody: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }]

      },
      // 富文本编辑器配置
      editor: null,
      html: '<p>hello</p>', // 编辑器里面的默认内容
      toolbarConfig: {
        toolbarKeys: [
          'bold',
          'italic',
          'underline',
          'through',
          'numberedList',
          'bulletedList',
          'blockquote',
          'codeBlock',
          'uploadImage',
          'insertLink'
        ]
      }, // 工具栏配置
      mode: 'simple' // or 'simple'

    }
  },
  // 计算属性
  computed: {
    showTitle () {
      return this.formData.id ? '编辑文章' : '新增文章'
    }
  },
  methods: {
    // 富文本编辑器的配置函数
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },

    // 确定按钮的点击事件
    async btnOK () {
      try {
        // 手动校验
        await this.$refs.dataForm.validate()
        if (this.formData.id) {
          // 编辑
          await update(this.formData)
        } else {
          // 新增
          // 调用接口
          await add(this.formData)
        }

        // 提示用户
        this.$message.success('操作成功!')
        // 关闭弹窗
        this.$emit('update:showDialog', false)
        // 更新页面
        this.$emit('update')
      } catch (error) {
        console.log(error)
        this.$message.error('内容不能为空!')
      }
    },

    // 取消按钮的点击事件
    cancelBtn () {
      // 清空校验规则
      this.$refs.dataForm.resetFields()
      // 重置表单数据
      this.formData = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      // 关闭弹层
      this.$emit('update:showDialog', false)
    },

    // 获取详情的方法
    async getdetail (node) {
      const { data } = await detail(node)
      this.formData = data
    }
  },
  // 防止内存泄漏
  beforeDestroy () {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style scoped lang='scss'>
</style>
